<template>
	<view class="cxcyzt">
		<div
		  class="cxcyzt_item"
		  v-for="(item, index) in data"
		  :key="index"
		>
		  <div class="level">{{ item.name }}</div>
		  <div class="percentage">{{ item.value }}</div>
		</div>
	</view>
</template>

<script>
	import { getKjyqList } from "@/api/zhyp/statistics";
	export default {
		data() {
			return {
				yqType: [],
				yqNum: [],
				data: [],
				percentageList: [],
				code:'6103'
			};
		},
		created() {
			this.getData();
		},
		methods: {
			async getData() {
				const param = {
					code: this.code,
				};
				const res = await getKjyqList(param);
				this.data = res.data.map(item=>{
					return {
						name: item.name,
						value: item.value+'家',
					}
				})
			},
		},
	}
</script>

<style lang="scss">
	.cxcyzt{
		width: 100%;
		height: 200rpx;
		display: flex;
		justify-content: space-around;
		.cxcyzt_item {
		  height: 100%;
		  flex: 1;
		  background-image: url(/static/largeDataScreenImg/cxcyzt_bg.png);
		  background-size: contain;
		  background-repeat: no-repeat;
		  background-position: center;
			position: relative;
		  .level {
		    color: #d0deee;
				font-size: 24rpx;
				width: 4em;
				text-align: center;
				position: absolute;
				left: 50%;
				transform: translateX(-50%);
				top: 35%;
		  }
		  .percentage {
				font-size: 24rpx;
		    color: #fff;
		    text-shadow: 0 0 0.375rem #66e1df;
				position: absolute;
				left: 50%;
				transform: translateX(-50%);
				bottom: 15%;
		  }
		}
	}
</style>